<template>
	<view class="user-card">
		<view @click='navback' class='back-pre'>
			<uni-icons type="back" size="30"></uni-icons>
		</view>
		<image class="user-bg"></image>
		<image class="user-head" :src="userInfo.head||'../../static/images/icon_user_head@3x.png'"></image>
		<view class="user-main">
			<view class="user-main-card">
				<view class="user-name">{{userInfo.userName}}<label class="user-auth" v-if="userInfo.auth">实名认证</label>
				</view>
				<view class="user-company">{{userInfo.company}}</view>
				<view class="user-tel">：{{userInfo.tel}}</view>
				<view class="service-tips">
					<image class="service-tips-icon" src="../../static/images/icon_service-tips@3x.png"></image>
					<label class="service-tips-item" v-for="(tips,index) in userInfo.tipsList"
						:key="index">{{tips}}</label>
				</view>
				<view class="user-content" v-html="userInfo.content"></view>
			</view>
		</view>
		<view class="user-rate">
			<view class="user-rate-header">评价<label class="user-rate-evaluate">{{userInfo.evaluate}}</label></view>
			<view class="user-rate-main">
				<label class="user-score-max">{{userInfo.score}}</label>
				<view class="user-score-item">
					<label class="user-score-label">综合评分</label>
					<uni-rate class="user-score-rate" margin="5" :readonly="true" :size="10" :value="userInfo.score" />
				</view>
				<view class="user-score-item">
					<label class="user-score-label">态度</label>
					<label class="user-score-text">{{userInfo.taiduNum}}</label>
				</view>
				<view class="user-score-item">
					<label class="user-score-label">效率</label>
					<label class="user-score-text">{{userInfo.xiaolvNum}}</label>
				</view>
				<view class="user-score-item">
					<label class="user-score-label">结果满意度</label>
					<label class="user-score-text">{{userInfo.jieguNum}}</label>
				</view>
			</view>
		</view>
		<view class="evaluate-empty" v-if="evaluateList.length==0">
			<image class="evaluate-empty-bg" src="../../static/images/img_evaluate_empty_bg@3x.png"></image>
			<label class="evaluate-empty-label">啊哦~ 还没有评价记录</label>
		</view>
		<scroll-view v-else class="scroll-v list" enableBackToTop="true" scroll-y @scrolltolower="loadMore">
			<view v-for="(item,index) in evaluateList" :key="index">
				<EvaluateItem :options="item" @click="goDetail(item)"></EvaluateItem>
			</view>
			<view class="loading-more" v-if="evaluateList.length > 4">
				<text class="loading-more-text">加载更多...</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import EvaluateItem from '../../components/evaluate-item.vue'
	export default {
		components: {
			EvaluateItem
		},
		data() {
			return {
				userInfo: {},
				evaluateList: []
			}
		},
		onLoad(option) {
			var userid = option.id;
			this.getUserInfo(userid);
			this.getEvaluateList(userid);
		},
		methods: {
			getUserInfo(userid) {
				//调接口获取用户信息
				this.userInfo = {
					userName: "沈萧燕",
					company: "成都壹贰叁文化有限公司",
					tel: "18681889665",
					auth: true,
					evaluate: 5,
					score: 4.5,
					taiduNum: 4.5,
					xiaolvNum: 4.5,
					jieguNum: 4.5,
					tipsList: ["PPT", "商业计划书", "小程序开发"],
					content: "假装这是自我简介内容，我的心情是久久不能平静，自古英雄出少年，卖家年纪轻轻，就有经天纬地之才，定国安邦之智，而今，天佑我大中华，沧海桑田5000年，神州平地一声雷，飞沙走石，大雾迷天，朦胧中泣。"
				}
			},
			getEvaluateList(userid) {
				//调接口获取评价列表
				let list = [];
				for (let i = 1; i <= 10; i++) {
					let item = {
						id: i,
						userHead: "",
						userName: "王何伟",
						auth: true,
						time: "2021-06-15",
						score: 4.5,
						scoreText: "满意",
						content: "交易成功后，我的心情是久久不能平静，自古英雄出少年，卖家年纪轻轻，就有经天纬地之才，定国安邦之智。交易成功后，我的心情是久久不能平静，自古英雄出少年，卖家年纪轻轻，就有经天纬地之才，定国安邦之智。"
					}
					list.push(item);
				}
				this.evaluateList = this.evaluateList.concat(list);
				this.$forceUpdate()
			},
			loadMore(e) {
				setTimeout(() => {
					this.getEvaluateList();
				}, 500)
			},
			navback() {
				uni.navigateBack()
			}
		}
	}
</script>

<style>
	.back-pre {
		position: fixed;
		top: 45rpx;
		left: 12rpx;
		color: #fff;
		z-index: 1;

	}

	.user-card {
		background-color: #F4F4F4;
	}

	.user-bg {
		width: 100%;
		height: 500rpx;
		background-color: #007AFF;
	}

	.user-head {
		width: 148rpx;
		height: 148rpx;
		border: 2rpx solid #FFFFFF;
		border-radius: 50%;
		position: absolute;
		top: 322rpx;
		left: 50%;
		transform: translateX(-74rpx);
		z-index: 2;
	}

	.user-main {
		background-color: #FFFFFF;
		margin-bottom: -70rpx;
		padding-bottom: 5rpx;
	}

	.user-main-card {
		width: calc(100% - 62rpx);
		background-color: #FFFFFF;
		margin: 0 32rpx;
		transform: translateY(-70rpx);
		box-shadow: 0px 4rpx 12rpx rgba(0, 0, 0, 0.14);
		border-radius: 16rpx;
		z-index: 1;
		padding: 64rpx 0 32rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-flow: column;
	}

	.user-name {
		font-size: 42rpx;
		color: #000000;
		font-weight: 500;
		margin-bottom: 14rpx;
	}

	.user-company {
		font-size: 28rpx;
		color: #7B7B7B;
		margin-bottom: 14rpx;
	}

	.user-tel {
		font-size: 28rpx;
		color: #7B7B7B;
		padding-left: 28rpx;
		background: url(../../static/images/icon_tel.png) left center no-repeat;
		background-size: 28rpx;
	}

	.user-auth {
		position: absolute;
		margin-left: 17rpx;
		margin-top: 8rpx;
	}

	.user-rate {
		border-radius: 0px 0px 16rpx 16rpx;
		background-color: #FFFFFF;
		padding: 32rpx;
		margin-bottom: 8rpx;
	}

	.user-rate-header {
		background: url(../../static/images/icon_pingjia@3x.png) 0 center no-repeat #FFFFFF;
		background-size: 28rpx;
		padding-left: 36rpx;
		font-size: 28rpx;
		color: #181818;
	}

	.user-rate-evaluate {
		margin-left: 8rpx;
		padding-left: 8rpx;
		border-left: 1px solid #D2D2D2;
		font-size: 28rpx;
		color: #ACACAC;
		height: 20rpx;
		line-height: 20rpx;
	}

	.user-rate-main {
		margin-top: 18rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.user-score-max {
		color: #FA9D3B;
		font-size: 54rpx;
		font-weight: 500;
		margin-right: 30rpx;
	}

	.user-score-item {
		display: flex;
		flex-flow: column;
		margin-right: 60rpx;
		height: 66rpx;
		justify-content: space-between;
	}

	.user-score-item:last-child {
		margin-right: 0;
	}

	.user-score-label {
		font-size: 20rpx;
		color: #7B7B7B;
		margin-bottom: 4rpx;
	}

	.user-score-text {
		font-size: 28rpx;
		color: #181818;
	}

	.evaluate-empty {
		background-color: #FFFFFF;
		border-radius: 16rpx 16rpx 0px 0px;
		text-align: center;
		padding-top: 48rpx;
		padding-bottom: 88rpx;
	}

	.evaluate-empty-bg {
		width: 228rpx;
		height: 164rpx;
		display: block;
		margin: 0 auto 30rpx auto;
	}

	.evaluate-empty-label {
		font-size: 22rpx;
		color: #ACACAC;
	}

	.user-content {
		margin: 32rpx auto 0;
		padding: 32rpx;
		padding-bottom: 0;
		border-top: 1px solid #DDDDDD;
	}

	.user-content rich-text {
		width: 622rpx;
		font-size: 24rpx;
		color: #7B7B7B;
		line-height: 36rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
	}

	page {
		height: 100%;
	}

	.user-card {
		height: 100%;
	}

	.scroll-v {
		height: 100%;
		background: rgba(255, 255, 255, 0.87);
		border-radius: 16rpx 16rpx 0px 0px;
	}
</style>
